import { EPokerStatus, ESuit } from "../../ConfigEnum";
import { Poker } from "../../GameScene/GameDB";

const { ccclass, property } = cc._decorator;

const POINT_MAP = {
    "1": "A",
    "2": "2",
    "3": "3",
    "4": "4",
    "5": "5",
    "6": "6",
    "7": "7",
    "8": "8",
    "9": "9",
    "10": "10",
    "11": "J",
    "12": "Q",
    "13": "K",
}

@ccclass
export default class UIPoker extends cc.Component {




    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}
    @property(cc.Label)
    pointLabel: cc.Label = null

    @property(cc.Sprite)
    bigSuitSprite: cc.Sprite = null

    @property(cc.Sprite)
    smallSuitSprite: cc.Sprite = null

    @property([cc.SpriteFrame])
    bigSuits: cc.SpriteFrame[] = []

    @property([cc.SpriteFrame])
    smallSuits: cc.SpriteFrame[] = []

    @property([cc.SpriteFrame])
    texFaces: cc.SpriteFrame[] = []

    @property([cc.SpriteFrame])
    texFrontBG: cc.SpriteFrame = null

    @property([cc.SpriteFrame])
    texBackBG: cc.SpriteFrame = null

    @property(cc.Sprite)
    bgSprite: cc.Sprite = null

    m_Poker: Poker


    private redTextColor: cc.Color = cc.color(193, 29, 45)
    private blackTextColor: cc.Color = cc.color(41, 41, 41)



    onDestroy() {
        this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this)
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
        this.node.off(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this)
        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this)
    }

    start() {
        this.node.on("touchstart", this.onTouchStart, this)
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this)
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this)
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this)
    }

    Init(poker: Poker) {
        this.m_Poker = poker
        poker.Bind(this)
        this.pointLabel.string = `${POINT_MAP[poker.point]}`
        this.pointLabel.node.color = (poker.suit == ESuit.HEITAO || poker.suit == ESuit.MEIHUA) ? this.blackTextColor : this.redTextColor

        if (poker.point >= 11) {
            this.bigSuitSprite.spriteFrame = this.texFaces[poker.point - 11]
        } else {
            this.bigSuitSprite.spriteFrame = this.bigSuits[poker.suit]
        }

        this.smallSuitSprite.spriteFrame = this.smallSuits[poker.suit]
        this.setStatus(poker.status)

    }
    setStatus(status: EPokerStatus) {
        if (status == EPokerStatus.CLOSE) {
            this.pointLabel.node.active = false
            this.bigSuitSprite.node.active = false
            this.smallSuitSprite.node.active = false
            this.bgSprite.spriteFrame = this.texBackBG
        } else {
            this.pointLabel.node.active = true
            this.bigSuitSprite.node.active = true
            this.smallSuitSprite.node.active = true
            this.bgSprite.spriteFrame = this.texFrontBG
        }
    }

    Refresh() {
        this.setStatus(this.m_Poker.status)
    }
    // update (dt) {}
    onTouchStart(event) {
        console.log("123123")
        let x = this.node.convertToNodeSpaceAR(event).x
    }
    onTouchMove(event) {
        let x = this.node.convertToNodeSpaceAR(event).x
    }
    onTouchEnd(event) {
        let x = this.node.convertToNodeSpaceAR(event).x
        
    }
}
